<template>
  <el-card>
    <template #header>订单数据</template>
    <div class="all-chart01">
      <div class="left-chart01">
        <!-- <div ref="main" style="width: 600px; height: 400px"></div> -->

        <!-- 如果都是驼峰命名法，就可以用 line-chart 的方式写 -->
        <h3>订单数据周对比</h3>
        <LineChar01 />
      </div>
      <div class="right-chart01">
        <h3>饼图示例</h3>
        <PieChart01 />
      </div>
    </div>
  </el-card>
</template>

<script>
// import * as echarts from 'echarts'
import LineChar01 from './components/LineChart01.vue'
import PieChart01 from './components/PieChart01.vue'

export default {
  components: {
    LineChar01,
    PieChart01
  }
  // mounted() {
  // this.initData()
  // },
  // methods: {
  // initData() {
  //   // 基于准备好的 DOM，初始化 echarts 实例
  //   var myChart = echarts.init(this.$refs.main)
  //   // 绘制图表
  //   myChart.setOption({
  //     title: {
  //       text: 'ECharts 入门示例'
  //     },
  //     tooltip: {},
  //     xAxis: {
  //       data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  //     },
  //     yAxis: {},
  //     series: [
  //       {
  //         name: '销量',
  //         type: 'bar',
  //         data: [5, 20, 36, 10, 10, 20]
  //       }
  //     ]
  //   })
  // }
  // }
}
</script>

<style lang="less" scoped>
.all-chart01 {
  display: flex;
  justify-content: space-between;
  .left-chart01 {
    flex: 0 0 55%;
    padding: 20px 0 0 0;
    h3 {
      text-align: center;
    }
  }
  .right-chart01 {
    flex: 0 0 40%;
    padding: 20px 0 0 0;
    h3 {
      text-align: center;
    }
  }
}
</style>
